<template>
  <div class="main_box">
    <CommonHeader title="新增"></CommonHeader>
    <van-form class="main_form" @submit="onSubmit">
      <div class="head">指标疑议反馈</div>
      <van-cell-group style="margin: 15px 0px">
        <van-select
          v-model="form.employeeId"
          label="指标负责人"
          :bindName="value"
          placeholder="请选择"
          :required="true"
          :rules="[{ required: true, message: ' ' }]"
          :options="personList"
          input-align="right" />
      </van-cell-group>
      <van-cell-group style="margin: 15px 0px" v-show="form.employeeId">
        <van-select
          v-model="form.issueNo"
          label="指标期号"
          placeholder="请选择"
          :required="true"
          :rules="[{ required: true, message: ' ' }]"
          :options="issueNoList"
          :filterable="false"
          input-align="right" />
      </van-cell-group>
      <van-cell-group v-show="form.employeeId && form.issueNo">
        <van-select
          v-model="form.quotaId"
          label="指标名称"
          placeholder="请选择"
          :required="true"
          :rules="[{ required: true, message: ' ' }]"
          :options="quotaList"
          input-align="right" />
      </van-cell-group>

      <van-field
        v-model="form.content"
        :required="true"
        :rules="[{ required: true, message: ' ' }]"
        input-align="left"
        name="content"
        placeholder="请输入疑议内容"
        maxlength="500"
        type="textarea"
        show-word-limit
        rows="6"></van-field>
      <div class="btn_box">
        <van-button round type="info" @click="submit">提 交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import CommonHeader from '@/components/commonHeader';
import { Toast } from 'vant';
export default {
  // eslint-disable-next-line
  name: 'AskHelp',
  components: {
    CommonHeader,
  },
  data() {
    return {
      value: '',
      submit: '',
      form: {
        quotaId: '',
        employeeId: '',
        issueNo: '',
        content: '',
      },
      issueNoList: [],
      personList: [],
      quotaList: [],
    };
  },
  watch: {
    'form.employeeId'() {
      this.getIssueNoList();
      if (this.form.issueNo) {
        this.getQuotaList();
      }
    },
    'form.issueNo'() {
      this.getQuotaList();
    },
  },
  created() {
    // const query = this.$route.query;
    // if (query.issueNoList) {
    //   this.issueNoList = query.issueNoList.map((item) => {
    //     return {
    //       name: item,
    //       value: item,
    //     };
    //   });
    //   this.issueNoList = this.issueNoList.slice(1, this.issueNoList.length);
    // }
    // this.getQuotaList();
    this.getPersonList();
  },
  methods: {
    getIssueNoList() {
      const params = {
        empId: this.form.employeeId,
      };
      this.$api.issueNoList(params).then((res) => {
        if (res.status === 200) {
          this.issueNoList = res.data.map((v) => ({ label: v.split('-')[0] + '-' + v.split('-')[1], value: v }));
        } else {
          this.issueNoList = [];
        }
      });
    },
    getQuotaList() {
      const params = {
        employId: this.form.employeeId,
        issueNo: this.form.issueNo,
      };
      this.$api.getQuotaList(params).then((res) => {
        if (res.status === 200) {
          this.quotaList = res.data.map((item) => {
            return {
              label: item.quotaName,
              value: item.quotaId,
            };
          });
        } else {
          this.quotaList = [];
        }
      });
    },
    getPersonList() {
      const params = {
        empId: sessionStorage.getItem('employId'),
      };
      this.$api.employeeList(params).then((res) => {
        if (res.status === 200) {
          this.personList = res.data.map((item) => {
            return {
              label: item.name,
              value: item.empId,
            };
          });
        } else {
          this.personList = [];
        }
      });
    },
    onSubmit() {
      let year = '';
      let month = '';
      if (this.form.issueNo) {
        year = this.form.issueNo.split('-')[0];
        month = this.form.issueNo.split('-')[1];
      }
      const params = {
        employeeId: this.form.employeeId,
        quotaId: this.form.quotaId,
        issueYear: year,
        issueMonth: month,
        content: this.form.content,
        issueNo: this.form.issueNo,
      };
      this.$api.zbabnormal(params).then((res) => {
        if (res.errno === 200) {
          Toast.success('提交成功');
          setTimeout(() => {
            this.$router.go(-1);
          }, 1500);
        } else {
          Toast.fail(res.errmsg);
        }
      });
    },
  },
};
</script>

<style scoped>
.main_box {
  min-height: 100vh;
  background-color: #f4f5fa;
}
.main_form {
  font-size: 14px;
  color: #333;
  padding: 15px;
}
.head {
  width: 100%;
  height: 44px;
  line-height: 44px;
  text-align: left;
  border-radius: 5px;
  margin-bottom: 10px;
  font-weight: 500;
  font-family: PingFang SC;
  padding: 0 16px;
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
}
.form_title {
  width: 100%;
  text-align: left;
  padding: 10px 0;
}
.right_icon {
  display: inline-block;
  width: 8px;
  height: 15px;
  background: url('../../assets/image/select_icon.png') no-repeat;
  background-size: 100% 100%;
}
.btn_box >>> .van-button {
  width: 90%;
  margin: 50px 10px;
}
.black >>> .van-field__control:disabled,
.black >>> .van-field__control[disabled] {
  color: #333 !important;
  opacity: 1;
  -webkit-text-fill-color: #000;
  -webkit-opacity: 1;
}
</style>